<template>
    <div class="e-form">
        <BillTop @cancel="printHandel"></BillTop>
        <div class="tabs">
            <div class="tabs-title" id="baseInfo">基本信息</div>
            <div style="width: 100%;" class="form">
                <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="240px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="业务类型" prop="businessTypeValue">
                                <el-select
                                    v-model="formData.businessTypeValue"
                                    placeholder="请选择"
                                    @change="onSelectBusinessTypeKey"
                                >
                                    <el-option
                                        v-for="item in turnoverData.businessTypeArr.slice(3, 6)"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        <el-form-item label="结算类型：">
                         {{setSettleType}}
                        </el-form-item>
                    </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="发票号" prop="invoiceNo">
                                <el-input
                                    style="flex: 1;"
                                    placeholder="请输入发票号"
                                    v-model="formData.invoiceNo"
                                    v-enterInteger1
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="录入人员" prop="entryPersonnelId">{{ formData.entryPersonnelName }}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="结算日期" prop="settlementDate">
                                <el-date-picker
                                    v-model="formData.settlementDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择结算日期"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态">
                                {{ '草稿' }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="录入机构" prop="orgId">
                                {{ formData.orgName }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="传输财务共享" prop="isSharing">
                                <span> {{ '未传' }} </span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="备注" prop="remarks">
                                <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入内容"
                                    v-model="formData.remarks"
                                    maxlength='500'
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="buttons">
            <el-button
                type="primary"
                style="background: #2e61d7"
                @click="onSave"
            >保存</el-button>
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { openAppClient, selectDataClient } from '@/utils/common'
import { mapState, mapMutations } from 'vuex'

let oldRouter = {} // 上一个页面来源
// eslint-disable-next-line no-unused-vars
import { addLeaseDisburseBase } from '@/api/settlementManagement/weeklyMaterialSettlement/leaseDisburse'
export default {
    computed: {
        ...mapState(['userInfo']),
        ...mapState('turnover', ['turnoverData']), // 业务类型
        //当前结算类型
        setSettleType () {
            const obj = {
                1: '内部列账',
                2: '外来发票',
            }
            return obj[this.formData.settlementType]
        },
    },
    data () {
        return {
            //表单数据
            formData: {
                'baseCurId': '',
                'baseCurName': '',
                'baseCurRate': 0,
                'baseSettleAmount': 0,
                'billId': '',
                'billNo': '',
                'borrowerId': '',
                'borrowerName': '',
                'businessTypeKey': '3',
                'businessTypeValue': '周材租赁合同',
                'cumulativeSettlementAmount': 0,
                'currency': '',
                'currencyId': '',
                'damages': 0,
                'easId': '',
                'entryPersonnelId': '',
                'entryPersonnelName': '',
                'exitFees': 0,
                'invoiceNo': '',
                'isExit': false,
                'isFinalSettlement': false,
                'isOffsetAdvancePayment': false,
                'isPersonalBorrowing': false,
                'isRed': 0,
                'isSharing': 0,
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'offsetAdvancePayment': 0,
                'orgId': '',
                'orgName': '',
                'parentId': '',
                'personalBorrowing': 0,
                'redState': 0,
                'remarks': '',
                'reversalObjectId': '',
                'reversalObjectNo': '',
                'rmbId': '',
                'rmbName': '',
                'rmbRate': 0,
                'settlementDate': '',
                'settlementType': 2,
                'settlementUnitId': '',
                'settlementUnitName': '',
                'slottingFee': 0,
                'sourceId': '',
                'sourceNo': '',
                'state': 0,
                'taxAmount': 0,
                'taxExcluding': 0,
                'taxRate': 0,
                'totalAmount': 0,
                'totalFreight': 0,
                'workId': ''
            },
            isSkip: false, //是否跳转
            rules: {
                businessTypeKey: [{ required: true, message: '请选择业务类型', trigger: ['blur', 'change'] }],
                settlementDate: [{ required: true, message: '请选择结算日期', trigger: ['blur', 'change'] }],
            },
        }
    },
    beforeRouteEnter (to, from, next) {
        oldRouter = from
        next()
    },
    beforeRouteLeave (to, from, next) {
        oldRouter = null
        next()
    },
    mounted () {
        this.formData.entryPersonnelId = this.userInfo.userId
        this.formData.entryPersonnelName = this.userInfo.userName
        this.formData.orgId = this.userInfo.orgInfo.orgId
        this.formData.orgName = this.userInfo.orgInfo.orgName
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        //保存按钮
        async onSave () {
            this.$refs['ruleForm'].validate(async valid => {
                if (valid) {
                    this.formData.redState = -1
                    const resData = await addLeaseDisburseBase(this.formData)
                    this.clientPop('info', '保存成功，是否继续？', () => {
                        this.$router.replace(`/turnoverLeaseDisburseEdit?billid=${resData}`)
                    }, null, () => {
                        this.$router.replace('/turnoverLeaseDisburse')
                    })
                }
            })
        },
        //取消按钮
        onCancel () {
            if (oldRouter.path === '/turnoverLeaseDisburse') {
                this.$router.back()
            } else {
                this.$router.replace('/turnoverLeaseDisburse')
            }
        },
        onSelectBusinessTypeKey (val) {
            //业务类型
            const type = {
                '3': '周材租赁合同',
                '4': '周材内租调动',
                '5': '临时需用计划'
            }
            this.formData.businessTypeKey = Number(val)
            this.formData.businessTypeValue = type[val]
            //1内部 2外来
            this.formData.settlementType = val == '4' ? 1 : 2
        }
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    margin-bottom: 80px;
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}

.e-table {
    background: #fff;
}

.el-tab-pane {
    margin-left: -10px;
}
</style>
